<template>
  <view class="task-item">
    <view class="item-top item-flex">
      <view class="item-top__left">{{ dateTime }}</view>
      <view class="item-top__right" v-if="showActions">
        <u-button size="mini" type="error" shape="circle" :plain="true" :hairline="true" @click="onClickCuidan"
          text="催单"></u-button>
      </view>
    </view>
    <view class="item-content item-flex" @click="onClickItem">
      <view class="item-img" @click.stop="onClickItem">
        <u-image :src="data.mainPictureUrl" width="200rpx" height="200rpx"></u-image>
      </view>
      <view class="item-main item-flex">
        <view class="item-cell item-cell-keyword">
          <view class="cell-main">关键字: {{ data.keyWord }}</view>
          <view class="cell-right copy-text" @click.stop="onClickCopy(data.keyWord)">复制</view>

        </view>
        <view class="item-cell item-cell-ww">
          <view class="cell-main">旺旺ID: {{ data.mallId || '--' }}</view>
        </view>
        <view class="item-cell item-cell-price">
          <view class="cell-main">客单价:{{ data.mainBrushingUserPrice || '--' }}</view>
          <view class="cell-main">下单价:{{ data.mainBrushingBillPrice || '--' }}</view>
        </view>
        <view class="item-cell item-cell-tb">
          <view class="cell-main">做单淘宝号: {{ data.customerAccount || '--' }} </view>
        </view>
        <view class="item-cell item-cell-zs">
          <view class="cell-main">主刷sku:{{ data.mainSku || '--'}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'TaskItem',
  props: {
    data: { type: Object, default: () => ({}) },
    showActions: { type: Boolean, default: true } // 是否显示‘催单’ action
  },
  data() {
    return {}
  },
  components: {},
  filters: {},
  computed: {
    dateTime() {
      return dayjs(this.data.createdAt).format('YYYY-DD-MM hh:mm:ss')
    }
  },
  watch: {},
  methods: {
    onClickItem() {
      uni.navigateTo({url: `/pages/task/detail?id=${this.data.id}`})
    },
    onClickCuidan() {
      console.log('onClickCuidan');
    },
    onClickCopy(text) {
      console.log('onClickCopy', text);
    },

  },
  created() { },
  mounted() { }
}
</script>

<style lang="scss" scoped>
.task-item {
  padding: 0 20rpx;
  margin-bottom: 20rpx;

  .item-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .item-top {
    height: 80rpx;
    border-bottom: 1px solid #f2f2f2;

    &__left {
      color: #9f9f9f;
      font-size: 13px;
    }

    &__right {
      font-size: 14px;
    }

  }

  .item-content {
    height: 200rpx;
    padding: 20rpx 0;
  }

  .item-img {
    flex-shrink: 0;
    width: 200rpx;
    height: 200rpx;
    margin-right: 20rpx;
  }

  .item-main {
    height: 100%;
    flex: 1;
    flex-direction: column;
    font-size: 12px;
    overflow: hidden;
  }

  .item-cell {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .cell-main {
      flex: 1;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }

    .cell-right {
      flex-shrink: 0;
    }
  }

  .cuidan-text {
    color: #f9343c
  }

  .copy-text {
    color: #f9343c
  }
}
</style>